<template>
    <div class="app-container">
    发布竞赛
    <el-form label-width="120px">
        <el-form-item label="竞赛名称">
            <el-input v-model="com.cname"/>
        </el-form-item>

        <el-form-item label="年度">
            <el-input v-model="com.year"/>
        </el-form-item>

        <el-form-item label="竞赛内容">
            <el-input v-model="com.content"/>
        </el-form-item>

        <el-form-item label="竞赛日期">
        

            <el-date-picker
              v-model="com.date"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>

        
        <!-- <el-form-item label="竞赛日期">
            <el-input v-model="com.date"/>
        </el-form-item> -->

        <el-form-item label="竞赛规范">
            <el-input v-model="com.norm"/>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="save">发布</el-button>
        </el-form-item>

        </el-form>
    </div>
</template>

<script>
import admin from '@/api/admin' 

export default {
    data() {
        return {
            com:{},
            

        }
    },
    created(){
        
    },
    methods:{
        //添加医院设置
        save(){
            admin.addCom(this.com).then(response=>{
                //提示
                this.$message({
                    type:'success',
                    message:'发布成功'
                })
                //跳转列表页面 使用路由跳转方式实现
                this.$router.push({path:'/admin/list'})
            }) 
        },

        // 写完修改后老师那发现一个bug，就是你点击编辑，跳转到带有数据回显的form页面，这时候点击添加导航栏，发现还是带数据回显的form页面，
        //添加是没有数据回显的，问题：vue-router导航切换 时，如果两个路由都渲染同个组件，组件的生命周期方法（created或者mounted）不会再被调用,
        //组件会被重用，显示上一个路由渲染出来的自建,解决方案：可以简单的在layout包下的AppMain.vue的 router-view标签上加上一个唯一的key，
        //来保证路由切换时都会重新触发生命周期方法，确保组件被重新初始化，但是我发现没有这个bug，看了看AppMain.vue，发现基于vue-cli的这个前端
        //模板已经给你写好了，而webpack版本的是被注释掉的，你需要解开并在method里加key()函数
        
    }
}
</script>

<style>

</style>